<template>
	<view>
		<uni-list>
			<uni-list-item v-for="(item,index) in list" :key="item.id" :title="item.name" :thumb="item.image"
				:note="item.note"></uni-list-item>
		</uni-list>

		<!-- 加载更多-->
		<uni-load-more :status="loadStatus"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [], // 数据列表
				scrollTop: 0, // 滚动位置
				page: 1, // 当前页数
				pageSize: 15, // 每页数据量
				loadStatus: 'more',
			};
		},
		onLoad() {
			this.initData();
		},
		//触底加载
		onReachBottom() {
			if (this.status != 'noMore') {
				this.status = 'loading';
				this.initData()
			} else {
				this.status = "noMore"
			}
		},
		methods: {
			// 初始化数据
			initData() {
				console.log('-----', 1)
				// 定时是为了模拟数据请求慢，延迟等问题。
				setTimeout(() => {
					this.getList()
				}, 1000); // 3000毫秒后执行*  
			},

			getList() {
				uni.request({
					url: 'api/test2',
					success: res => {
						let newList = [];
						//  this.list.length <=50 是为了模拟数据加载完毕的情况，因为使用的是Mock模拟数据。会一直产生数据
						if (res.data.list.length != 0 && this.list.length <= 30) {
							newList = res.data.list;
						} else {
							this.loadStatus = 'noMore';
						}

						// 将前后的数据拼接在一起
						this.list = this.list.concat(newList);
						this.page++

						console.log(res);
					}
				});
			},


		}
	}
</script>

<style lang="scss">

</style>